;const initialDiagram =
  '<?xml version="1.0" encoding="UTF-8"?>' +
  '<bpmn:definitions xmlns="http://www.omg.org/spec/BPMN/20100524/MODEL"' +
  '             xmlns:camunda="http://camunda.org/schema/1.0/bpmn"'+
  '             xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"' +
  '             xmlns:xsd="http://www.w3.org/2001/XMLSchema"' +
  '             xmlns:flowable="http://flowable.org/bpmn"' +
  '             xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI"' +
  '             xmlns:omgdc="http://www.omg.org/spec/DD/20100524/DC"' +
  '             xmlns:omgdi="http://www.omg.org/spec/DD/20100524/DI"' +
  '             xmlns:dc="http://www.omg.org/spec/DD/20100524/DC"' +
  '             xmlns:di="http://www.omg.org/spec/DD/20100524/DI"' +
  '             typeLanguage="http://www.w3.org/2001/XMLSchema"' +
  '             expressionLanguage="http://www.w3.org/1999/XPath"' +
  '             targetNamespace="http://www.flowable.org/processdef">' +
  '<bpmn:process id="Process_1" isExecutable="false">' +
  '<bpmn:startEvent id="StartEvent_1"/>' +
  '</bpmn:process>' +
  '<bpmndi:BPMNDiagram id="BPMNDiagram_1">' +
  '<bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_1">' +
  '<bpmndi:BPMNShape id="_BPMNShape_StartEvent_2" bpmnElement="StartEvent_1">' +
  '<dc:Bounds height="36.0" width="36.0" x="173.0" y="102.0"/>' +
  '</bpmndi:BPMNShape>' +
  '</bpmndi:BPMNPlane>' +
  '</bpmndi:BPMNDiagram>' +
  '</bpmn:definitions>';

var bpmnModeler;
var overlays;
var elementRegistry;
var modeling;
var moddle;
var inputs;

var curElement;

var pros = {
  id: '',
  name: '',
  conditionExpression: '',
  assignee: ''
};
function prosInit() {
  pros = {
    id: '',
    name: '',
    conditionExpression: '',
    assignee: ''
  };
}
// 读取属性
function readPros(element) {
  prosInit();
  var sequenceFlow = element.businessObject;
  pros.name = sequenceFlow.name === undefined ? '' : sequenceFlow.name;
  try {
    pros.conditionExpression = sequenceFlow.conditionExpression.body
  } catch (e) {
    pros.conditionExpression = "";
  }
  try {
    pros.assignee = sequenceFlow.$attrs['camunda:assignee'] ? sequenceFlow.$attrs['camunda:assignee'] : "";
  } catch (e) {
    pros.assignee = "";
  }
  //
  pros.id = element.id;

  writeInputs();
}
// 设置属性
function wirtePros(element) {
  readInputs();
  var sequenceFlow = element.businessObject;
  modeling.updateProperties(element, {
    'id': pros.id,
    'name': pros.name
  });
  //  camunda:assignee="aaaaaaa"
  if (element.type === 'bpmn:UserTask') {
    modeling.updateProperties(element, {
      'camunda:assignee': pros.assignee
    });
  }

  if (element.type === 'bpmn:SequenceFlow') {
    var cmv = 0;
    if (pros.conditionExpression.length > 1) {
        cmv = "<![CDATA[" + pros.conditionExpression + "]]>";
    } else {
        sequenceFlow.conditionExpression = null;
        return;
    }
    var newCondition = moddle.create('bpmn:FormalExpression', {
      body: cmv
    });
    sequenceFlow.conditionExpression = newCondition;
  }
}
function readInputs() {
  pros.id = inputs[0].value;
  pros.name = inputs[1].value;
  pros.conditionExpression = inputs[2].value;
  pros.assignee = inputs[3].value;
}
function writeInputs() {
  inputs[0].value = pros.id;
  inputs[1].value = pros.name;
  inputs[2].value = pros.conditionExpression;
  inputs[3].value = pros.assignee;
}
// 清空层
function clearOverlays(element) {
  overlays.remove({element: e.element});
}
// 根据元素ID设置颜色
function addColor(elementId) {
  // 添加颜色
  var elementToColor = elementRegistry.get(elementId);
  modeling.setColor([ elementToColor ], {
    position: {
      top: -10,
      left: 0
    },
    stroke: 'green',
    fill: 'rgba(0, 80, 0, 0.4)'
  });
}
// 元素的ID 添加自定义事件
function clickToDom(id) {
  var endEventNode = document.querySelector('[data-element-id=' + id + ']');
  if (endEventNode) {
    endEventNode.addEventListener('click', function(e) {
      alert('clicked the end event!');
    });
  }
}
// 设置叠加层
function addOverlays(nodeId) {
  overlays.add(nodeId, 'note', {
    position: {
      bottom: 0,
      right: 0
    },
    html: '<div class="diagram-note">Mixed up the labels?</div>'
  });
}
// 新建
function createDm() {
  openDiagram(initialDiagram);
}
// 打开
function openDm() {
  // http 请求
  $.get('../assets/1005.bpmn', function (data) {
    openDiagram(data);
  });
}
// 保存SVG图片
function exportSvg() {
  bpmnModeler.saveSVG(function (err, svg) {
    if (err) {
      return console.error('could not save BPMN 2.0 diagram', err);
    }
    console.log(svg);
  });
}
// 导出XML
function exportDiagram() {
  bpmnModeler.saveXML({ format: true }, function(err, xml) {
    if (err) {
      return console.error('could not save BPMN 2.0 diagram', err);
    }

    xml = xml.replace(/&apos;/g, "'")
        .replace(/&quot;/g, '"')
        .replace(/&gt;/g, '>')
        .replace(/&lt;/g, '<')
        .replace(/&amp;/g, '&');

    console.log(xml);
  });
}
// 打开设计图
function openDiagram(bpmnXML) {
  // import a BPMN 2.0 diagram
  bpmnModeler.importXML(bpmnXML, function(err) {
    if (err) {
      // import failed :-(
    } else {
      // we did well!
      overlays = bpmnModeler.get('overlays');
      var canvas = bpmnModeler.get('canvas');
      elementRegistry = bpmnModeler.get('elementRegistry');
      modeling = bpmnModeler.get('modeling');
      moddle = bpmnModeler.get('moddle');
      //  var transactionBoundaries = bpmnModeler.get('transactionBoundaries');
      // transactionBoundaries.show();
      canvas.zoom('fit-viewport');
    }
  });
}
// 初始化点击事件
function initClick() {
  var eventBus = bpmnModeler.get('eventBus');

  // 单击事件
  eventBus.on('element.click', function(e) {
    // e.element = the model element
    // e.gfx = the graphical element
    console.log(e.element);
    curElement = e.element;
    readPros(e.element);
  });

  eventBus.on('element.hover', function(e) {
    // e.element = the model element
    // e.gfx = the graphical element
    if (e.element.type === 'bpmn:Process') {
      return;
    }
  });
  // 离开
  eventBus.on('element.out', function(e) {
    if (e.element.type === 'bpmn:Process') {
      return;
    }
    console.log(e.element.id);
  });
}
// 初始化界面属性事件和输入控件
function initPros() {
  $("#savePros").on("click", function (event) {
    wirtePros(curElement);
  });
  inputs = $(".mdui-textfield-input");
}


(function () {
    // 初始化bpmn
  bpmnModeler  = new BpmnJS({
      container: '#canvas',
      additionalModules: [
          PaletteProvider
      ]
  });

  openDiagram(initialDiagram);
  initClick();
  initPros();
})();